<template>
    <el-container style="height: 100vh">
        <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 2px 0 6px rgb(0 21 41/35%);">
            <Aside  :isCollapse="isCollapse" :logoTextShow="logoTextShow"/>
        </el-aside>

        <el-container>
            <el-header style="border-bottom: 1px solid #ccc;font-size: 18px;line-height: 30px;display: flex">
              <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
            </el-header>

            <el-main>
<!--当前页面子路由会在router-view里显示-->
              <router-view @refershUser="getUser"/>
            </el-main>



        </el-container>


    </el-container>



</template>
<script>

import Header from "@/components/Header.vue";
import Aside from '@/components/Aside.vue';
import user from "@/views/User.vue";

export default {
    name: 'Manage',
    data() {
        return {
            msg: "hello",
            collapseBtnClass: "el-icon-s-fold",//关闭按钮
            isCollapse: false,//侧边栏折叠
            sideWidth: 150,
            logoTextShow: true,//侧边栏标题文本显示
            user:{}
        }
    },
    mounted(){
      //页面所有信息加载完毕再加载这个
    },
    created(){
      this.getUser()
    },
    components: {
      //引用
        Aside,
        Header
    },

    //补充文件上传的地址
    methods: {

      collapse() { //点击收缩按钮触发
        this.isCollapse = !this.isCollapse
        if (this.isCollapse) { //收缩
          this.sideWidth = 65
          this.collapseBtnClass = 'el-icon-s-unfold'
          this.logoTextShow = false
        } else { //展开
          this.sideWidth = 150
          this.collapseBtnClass = "el-icon-s-fold"
          this.logoTextShow = true
        }
      },
      getUser(){
        let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
        if(username){
          //从后台获取User数据
          this.request.get("/user/username/" + username).then(res => {
            //重新赋值后台的最新User数据
            this.user = res.data
          })
        }
      }
    }
}
</script>
